<template>
  <section class="h100 pt15 tabs-fixed">
    <van-tabs v-model="activeName" sticky animated swipeable @change="onChange">
      <van-tab
        :title="item.title"
        :name="item.name"
        v-for="(item, index) in tabs"
        :key="index"
      >
        <van-row class="activity-panel">
          <van-row class="title">限时活动</van-row>
          <van-row class="list">
            <van-row
              class="item"
              v-for="(item, index) in list"
              :key="index"
              @click="toDeatil"
            >
              <van-row class="name">{{ item.name }}</van-row>
              <van-row class="btns">
                <div class="option" v-if="item.status == 1">正在进行</div>
                <div class="option style-1" v-else>已结束</div>
              </van-row>
            </van-row>
          </van-row>
        </van-row>
        <van-row class="activity-panel">
          <van-row class="title">常驻活动</van-row>
          <van-row class="list">
            <van-row class="item">
              <van-row class="name">VIP积分兑换</van-row>
              <van-row class="btns">
                <div class="option style-2">申请</div>
              </van-row>
            </van-row>
            <van-row class="item">
              <van-row class="name">福利大放送</van-row>
              <van-row class="btns">
                <div class="option style-2">查看</div>
              </van-row>
            </van-row>
            <van-row class="item">
              <van-row class="name">福利大放送</van-row>
              <van-row class="btns">
                <div class="option style-2">查看</div>
              </van-row>
            </van-row>
            <van-row class="item">
              <van-row class="name">福利大放送</van-row>
              <van-row class="btns">
                <div class="option style-2">查看</div>
              </van-row>
            </van-row>
            <van-row class="item">
              <van-row class="name">福利大放送</van-row>
              <van-row class="btns">
                <div class="option style-2">查看</div>
              </van-row>
            </van-row>
            <van-row class="item">
              <van-row class="name">福利大放送</van-row>
              <van-row class="btns">
                <div class="option style-2">查看</div>
              </van-row>
            </van-row>
            <van-row class="item">
              <van-row class="name">福利大放送</van-row>
              <van-row class="btns">
                <div class="option style-2">查看</div>
              </van-row>
            </van-row>
            <van-row class="item">
              <van-row class="name">福利大放送</van-row>
              <van-row class="btns">
                <div class="option style-2">查看</div>
              </van-row>
            </van-row>
            <van-row class="item">
              <van-row class="name">福利大放送</van-row>
              <van-row class="btns">
                <div class="option style-2">查看</div>
              </van-row>
            </van-row>
            <van-row class="item">
              <van-row class="name">福利大放送</van-row>
              <van-row class="btns">
                <div class="option style-2">查看</div>
              </van-row>
            </van-row>
          </van-row>
        </van-row>
      </van-tab>
    </van-tabs>
  </section>
</template>

<script>
export default {
  data() {
    return {
      activeName: "/activities/list",
      tabs: [
        {
          title: "礼包",
          name: "/gift/list",
        },
        {
          title: "优惠券",
          name: "/coupon/list",
        },
        {
          title: "活动",
          name: "/activities/list",
        },
      ],
      list: [
        {
          name: "七月赏月活动",
          status: 1,
        },
        {
          name: "5月烟花活动-线下返利",
          status: 2,
        },
      ],
    };
  },
  created() {
    //  this.getLoad();
  },
  methods: {
    //初始化加载
    getLoad() {
      this.$http(
        `/basedata/common/getMenu`,
        { menuType: 1 },
        "get",
        false
      ).then((res) => {});
    },
    //tab切换
    onChange(e) {
      this.activeName = e;
      this.$router.push(e);
    },
    //跳转到详情
    toDeatil() {
      this.$router.push("/activities/details");
    },
  },
};
</script>

<style lang="less">
@import "../../../assets/css/welfare/index.less";
</style>
